<template>
	<view class="chat">
		<view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex download_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between download_fd0_0' @tap.stop="handleJumpDiy"
				data-type="back" data-url="1">
				<view class='flex flex-wrap align-center download_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
					data-url="1">

					<text class='fu-iconfont2  evaluates_fd0_0_c0_c0'>&#xe794;</text>
				</view>
				<view class='flex flex-wrap align-center'>
					<text class='download_fd0_0_c1_c0'>客服</text>
				</view>
				<view class='flex align-center justify-end download_fd0_0_c2'>
					<text @tap.stop="del">删除</text>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="content">
			<scroll-view scroll-y="true" class="msgList" :scroll-top="scrollTop" :style="{ height: ((scrollViewHeight * 2) - (88+StatusBarRpx)) + 'rpx' }" :scroll-into-view="scrollIntoView" upper-threshold="0" @scrolltoupper="pulldown">
				
				<view class="eachMsg" v-for="(item,index) in historyList" :key="index" :id="'list-item'+ index">
					<view class="myMsg msgStyle" style="display: flex;justify-content: flex-end;"
						v-if="item.to_user_id==to_id">
						<view class="msgText" v-if="item.msg_type==1">
							<u-parse :html="item.content"></u-parse>
						</view>
						<view class="msgImg" v-else-if="item.msg_type==2">
							<image @tap.stop="previewImage(item.content)" :src="item.content" mode="aspectFill">
							</image>
						</view>
						<view class="msgOrder" @tap.stop="goDetails(item.content.goods_id)" v-if="item.msg_type==4">
							<view class="msgOrder_img">
								<image :src="item.content.image" mode="aspectFill"></image>
							</view>
							<view class="msgOrder_text">
								<view class="msgOrder_text_1">{{item.content.goods_name}}</view>
								<view class="msgOrder_text_2">
									<text class="msgOrder_text_2_1">¥</text>
									<text>{{item.content.shop_price}}</text>
								</view>
							</view>
						</view>
						<image :src="item.avatar" mode="aspectFill" class="headImg"></image>
					</view>
					<view class="toMsy msgStyle" v-else>
						<image :src="item.avatar" mode="aspectFill" class="headImg"></image>
						<view class="msgText" v-if="item.msg_type==1">
							<u-parse :html="item.content"></u-parse>
						</view>
						<view class="msgImg" v-else-if="item.msg_type==2">
							<image @tap.stop="previewImage(item.content)" :src="item.content" mode="aspectFill">
							</image>
						</view>
						<view class="msgOrder" @tap.stop="goDetails(item.content.goods_id)" v-if="item.msg_type==4">
							<view class="msgOrder_img">
								<image :src="item.content.image" mode="aspectFill"></image>
							</view>
							<view class="msgOrder_text">
								<view class="msgOrder_text_1">{{item.content.goods_name}}</view>
								<view class="msgOrder_text_2">
									<text class="msgOrder_text_2_1">¥</text>
									<text>{{item.content.shop_price}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="bottom" :style="{bottom: ((showMore || hideEmoji) ? '315rpx' : '0')}">
				<view class="input">
					<!-- <input type="text" v-model="messageContent" confirm-type="send"
						@confirm="onSendMessage($event)" @focus="showMore = false" /> -->
					<textarea auto-height="true" class="textarea" v-model="messageContent" @confirm="onSendMessage($event)" @focus="showMore = false"></textarea>
					<!-- <div class="input_div" contenteditable v-html="messageContent"></div> -->
					<image class="emoji_btn" src="/static/images/emoji.png" mode="" @tap.stop="hideEmojiInfo"></image>
				</view>
				<text v-if="isSend" @tap="onSendMessage">发送</text>
				<view class="addFunction" v-else>

					<image src="/static/images/addFunction.png" mode="" @tap.stop="handleToggleMore"></image>
				</view>
			</view>

			<!-- 更多功能 -->
			<view class="face-box-wapper more" v-show="showMore || hideEmoji">
				<block v-if="hideEmoji">
					<swiper class="emoji-swiper" indicator-dots="true" duration="150">
						<swiper-item v-for="(page, pid) in emojiList" :key="pid">
							<view v-for="(em, eid) in page" :key="eid" @tap="addEmoji(em)">
								<image mode="widthFix" :src="'/static/face/' + em.url"></image>
							</view>
						</swiper-item>
					</swiper>
				</block>

				<view class="more-box" v-if="showMore">
					<view class="item" @tap="handleChooseImage('camera')">
						<image src="/static/images/3599.png"></image>
						<view class="name">拍照</view>
					</view>
					<view class="item" @tap="handleChooseImage('album')">
						<image src="/static/images/3594.png"></image>
						<view class="name">照片</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const {
		windowHeight,
		statusBarHeight
	} = uni.getSystemInfoSync()
	import {
		UploadFileToOSS
	} from '@/common/utils/index';
	import commen from '@/common/utils/chat-img.js'
	import UploadImage from '@/common/utils/upload-image.js'
	export default {
		data() {
			let scrollViewHeight = windowHeight
			// #ifdef H5
			scrollViewHeight = windowHeight
			// #endif
			return {
				messageContent: '',
				isSend: false,
				showMore: false,
				say_list: [],
				// xs
				page: 1,
				chat_type: '', // chat_type  类型 1 单聊    2 群聊
				to_id: '', // 对方的id
				to_name: '', // 对方的昵称
				room_id: '', // 群聊房间id
				roomName: '',
				from_id: '', //我的id
				redInfo: {
					content: {
						intro: '',
						source: '',
						total_money: ''
					}
				},
				historyList: [],
				scrollTop: 0, // 聊天框 滚动条
				scrollViewHeight: scrollViewHeight, //初始化scroll高度
				scrollIntoView: '', //scroll滚动位置
				page: 1,
				messageTotal: 0,
				shop_id: '', // 商品id
				messageImg: '', // 发送图片路径
				hideEmoji: false,
				emojiList: commen.emojiList,
				onlineEmoji: [{
						"name": "Expression_1",
						"text": "[微笑]"
					},
					{
						"name": "Expression_2",
						"text": "[撇嘴]"
					},
					{
						"name": "Expression_3",
						"text": "[色]"
					},
					{
						"name": "Expression_4",
						"text": "[发呆]"
					},
					{
						"name": "Expression_5",
						"text": "[得意]"
					},
					{
						"name": "Expression_6",
						"text": "[流泪]"
					},
					{
						"name": "Expression_7",
						"text": "[害羞]"
					},
					{
						"name": "Expression_8",
						"text": "[闭嘴]"
					},
					{
						"name": "Expression_9",
						"text": "[睡]"
					},
					{
						"name": "Expression_10",
						"text": "[大哭]"
					},
					{
						"name": "Expression_11",
						"text": "[尴尬]"
					},
					{
						"name": "Expression_12",
						"text": "[发怒]"
					},
					{
						"name": "Expression_13",
						"text": "[调皮]"
					},
					{
						"name": "Expression_14",
						"text": "[呲牙]"
					},
					{
						"name": "Expression_15",
						"text": "[惊讶]"
					},
					{
						"name": "Expression_16",
						"text": "[难过]"
					},
					{
						"name": "Expression_17",
						"text": "[酷]"
					},
					{
						"name": "Expression_18",
						"text": "[冷汗]"
					},
					{
						"name": "Expression_19",
						"text": "[抓狂]"
					},
					{
						"name": "Expression_20",
						"text": "[吐]"
					},
					{
						"name": "Expression_21",
						"text": "[偷笑]"
					},
					{
						"name": "Expression_22",
						"text": "[愉快]"
					},
					{
						"name": "Expression_23",
						"text": "[白眼]"
					},
					{
						"name": "Expression_24",
						"text": "[傲慢]"
					},

					{
						"name": "Expression_25",
						"text": "[饥饿]"
					},
					{
						"name": "Expression_26",
						"text": "[困]"
					},
					{
						"name": "Expression_27",
						"text": "[恐惧]"
					},
					{
						"name": "Expression_28",
						"text": "[流汗]"
					},
					{
						"name": "Expression_29",
						"text": "[憨笑]"
					},
					{
						"name": "Expression_30",
						"text": "[悠闲]"
					},
					{
						"name": "Expression_31",
						"text": "[奋斗]"
					},
					{
						"name": "Expression_32",
						"text": "[咒骂]"
					},
					{
						"name": "Expression_33",
						"text": "[疑问]"
					},
					{
						"name": "Expression_34",
						"text": "[嘘]"
					},
					{
						"name": "Expression_35",
						"text": "[晕]"
					},
					{
						"name": "Expression_36",
						"text": "[疯了]"
					},
					{
						"name": "Expression_37",
						"text": "[衰]"
					},
					{
						"name": "Expression_38",
						"text": "[骷髅]"
					},
					{
						"name": "Expression_39",
						"text": "[敲打]"
					},
					{
						"name": "Expression_40",
						"text": "[再见]"
					},
					{
						"name": "Expression_41",
						"text": "[擦汗]"
					},
					{
						"name": "Expression_42",
						"text": "[抠鼻]"
					},
					{
						"name": "Expression_43",
						"text": "[鼓掌]"
					},
					{
						"name": "Expression_44",
						"text": "[糗大了]"
					},
					{
						"name": "Expression_45",
						"text": "[坏笑]"
					},
					{
						"name": "Expression_46",
						"text": "[左哼哼]"
					},
					{
						"name": "Expression_47",
						"text": "[右哼哼]"
					},
					{
						"name": "Expression_48",
						"text": "[哈欠]"
					},

					{
						"name": "Expression_49",
						"text": "[鄙视]"
					},
					{
						"name": "Expression_50",
						"text": "[委屈]"
					},
					{
						"name": "Expression_51",
						"text": "[快哭了]"
					},
					{
						"name": "Expression_52",
						"text": "[阴险]"
					},
					{
						"name": "Expression_53",
						"text": "[亲亲]"
					},
					{
						"name": "Expression_54",
						"text": "[吓]"
					},
					{
						"name": "Expression_55",
						"text": "[可怜]"
					},
					{
						"name": "Expression_56",
						"text": "[菜刀]"
					},
					{
						"name": "Expression_57",
						"text": "[西瓜]"
					},
					{
						"name": "Expression_58",
						"text": "[啤酒]"
					},
					{
						"name": "Expression_59",
						"text": "[篮球]"
					},
					{
						"name": "Expression_60",
						"text": "[乒乓]"
					},
					{
						"name": "Expression_61",
						"text": "[咖啡]"
					},
					{
						"name": "Expression_62",
						"text": "[饭]"
					},
					{
						"name": "Expression_63",
						"text": "[猪头]"
					},
					{
						"name": "Expression_64",
						"text": "[玫瑰]"
					},
					{
						"name": "Expression_65",
						"text": "[凋谢]"
					},
					{
						"name": "Expression_66",
						"text": "[嘴唇]"
					},
					{
						"name": "Expression_67",
						"text": "[爱心]"
					},
					{
						"name": "Expression_68",
						"text": "[心碎]"
					},
					{
						"name": "Expression_69",
						"text": "[蛋糕]"
					},
					{
						"name": "Expression_70",
						"text": "[闪电]"
					},
					{
						"name": "Expression_71",
						"text": "[炸弹]"
					},
					{
						"name": "Expression_72",
						"text": "[刀]"
					},

					{
						"name": "Expression_73",
						"text": "[足球]"
					},
					{
						"name": "Expression_74",
						"text": "[瓢虫]"
					},
					{
						"name": "Expression_75",
						"text": "[便便]"
					},
					{
						"name": "Expression_76",
						"text": "[月亮]"
					},
					{
						"name": "Expression_77",
						"text": "[太阳]"
					},
					{
						"name": "Expression_78",
						"text": "[礼物]"
					},
					{
						"name": "Expression_79",
						"text": "[拥抱]"
					},
					{
						"name": "Expression_80",
						"text": "[强]"
					},
					{
						"name": "Expression_81",
						"text": "[弱]"
					},
					{
						"name": "Expression_82",
						"text": "[握手]"
					},
					{
						"name": "Expression_83",
						"text": "[胜利]"
					},
					{
						"name": "Expression_84",
						"text": "[抱拳]"
					},
					{
						"name": "Expression_85",
						"text": "[勾引]"
					},
					{
						"name": "Expression_86",
						"text": "[拳头]"
					},
					{
						"name": "Expression_87",
						"text": "[差劲]"
					},
					{
						"name": "Expression_88",
						"text": "[爱你]"
					},
					{
						"name": "Expression_89",
						"text": "[NO]"
					},
					{
						"name": "Expression_90",
						"text": "[OK]"
					},
					{
						"name": "Expression_91",
						"text": "[爱情]"
					},
					{
						"name": "Expression_92",
						"text": "[飞吻]"
					},
					{
						"name": "Expression_93",
						"text": "[跳跳]"
					},
					{
						"name": "Expression_94",
						"text": "[发抖]"
					},
					{
						"name": "Expression_95",
						"text": "[怄火]"
					},
					{
						"name": "Expression_96",
						"text": "[转圈]"
					},


					{
						"name": "Expression_97",
						"text": "[磕头]"
					},
					{
						"name": "Expression_98",
						"text": "[回头]"
					},
					{
						"name": "Expression_99",
						"text": "[跳绳]"
					},
					{
						"name": "Expression_100",
						"text": "[投降]"
					},
					{
						"name": "Expression_101",
						"text": "[激动]"
					},
					{
						"name": "Expression_102",
						"text": "[街舞]"
					},
					{
						"name": "Expression_103",
						"text": "[献吻]"
					},
					{
						"name": "Expression_104",
						"text": "[左太极]"
					},
					{
						"name": "Expression_105",
						"text": "[右太极]"
					}
				],

			};
		},
		onLoad(option) {
			let {id, shop_id} = option;
			if (id !== undefined) this.to_id = id;
			if (shop_id !== undefined) this.shop_id = shop_id;
			
			// this.to_name = option.user_nickname
			this.to_name = '客服';
			this.from_id = global.userInfo.id;
			// if (this.to_id > this.from_id) {
			// 	this.room_id = this.from_id + '_' + this.to_id
			// } else {
			// 	this.room_id = this.to_id + '_' + this.from_id
			// }
			// console.log(this.to_id)
			this.getHistoryList()
			// this.rollScrollview()
			// uni.setNavigationBarTitle({
			// 	title: e.userName
			// })
			// this.messageContent = this.shop_id;

			// 全局监听接收消息
			uni.$on('newMsg', (res) => {
				// console.log(res);
				this.historyList.push(res.onMessageJson)
				let uni_id = this.historyList.length - 1
				// console.log(uni_id);
				this.$nextTick(() => {
					this.scrollIntoView = 'list-item' + uni_id;
				})
			})
			// 已读通知
			this.readSocket();
		},
		onShow() {
			setTimeout(() => {
				this.scrollTop = 9999999;
			}, 800)
		},
		watch: {
			messageContent() {
				if (this.messageContent) {
					// console.log(this.transEmo(this.messageContent));
					this.isSend = true;
				} else {
					this.isSend = false;
				}
			}
		},
		// 监听页面的返回事件
		onBackPress() {
			console.log('聊天返回')
			// this.$api.post('v1/5fe55f783b075', {
			// 	room_id: this.room_id
			// }).then(res => {

			// })
		},
		methods: {
			del(e) {
				this.$api.post(global.apiUrls.post656ee317c913d, {
					// aid: e.aid
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						this.historyList = [];
					}
				})
			},
			getHistoryList() {
				uni.showLoading({
					title: '加载中'
				})
				this.$api.post(global.apiUrls.post64db441054236, {
					page: this.page,
					other_user_id: this.to_id
				}).then(res => {
					console.log(res);
					uni.hideLoading()
					if (res.data.code == 1) {
						// if (res.data.data.data.length == 0) {
						// 	this.$message.info('暂无更多记录')
						// }
						// var reverseArr = res.data.data.data.reverse()
						var reverseArr = res.data.data.data;
						this.messageTotal = res.data.data.total;
						if (this.page == 1) {
							reverseArr.forEach((v, h) => {
								this.historyList.push(v)
							})
							let uni_id = this.historyList.length - 1
							this.$nextTick(() => {
								this.scrollIntoView = 'list-item' + uni_id;
							})
						} else {
							reverseArr.forEach((v, h) => {
								this.historyList.unshift(v)
							})
						}
						if (this.shop_id) {
							this.singleChat('send', 4);
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			pulldown() {
				if (this.messageTotal <= this.historyList.length) {
					return;
				}
				this.page++,
					this.getHistoryList()
			},
			msgIpt() {
				if (this.messageContent.length != 0) {
					this.isSend = true
				} else {
					this.isSend = false
				}
			},
			// 切换更多盒子显示与隐藏
			handleToggleMore() {
				this.showMore = !this.showMore;
				let uni_id = this.historyList.length - 1;
				this.$nextTick(() => {
					this.scrollIntoView = 'list-item' + uni_id;
				})
				this.hideEmoji = false;
				// if (this.showMore) {
				// 	this.scrollViewHeight = this.scrollViewHeight - 150
				// } else {
				// 	this.scrollViewHeight = this.scrollViewHeight + 150
				// }
			},
			hideEmojiInfo() {
				this.hideEmoji = !this.hideEmoji;
				let uni_id = this.historyList.length - 1;
				this.$nextTick(() => {
					this.scrollIntoView = 'list-item' + uni_id;
				})
				this.showMore = false;
			},
			readSocket() {
				let message = '';
				message = {
					event: 'read',
					from_user_id: global.userInfo.id,
					to_user_id: this.to_id
				};
				uni.sendSocketMessage({
					data: JSON.stringify(message),
					success: (res) => {
						console.log(res)
					},
					fail: (err) => {
						console.log(err)
						getApp().initializeSocket();
					}
				});
			},
			// 发送消息
			onSendMessage(e) {
				const {
					messageContent,
					chat_type,
					singleChat,
					groupChat
				} = this;
				if (messageContent) {
					const type = 'send',
						msg_type = 1;
					singleChat(type, msg_type)
				}
			},
			// 聊天
			singleChat(type, msg_type) {
				/**
				 * chat_type  1私聊 2群聊
				 * "type" "say"
				 * from_id 自己的id
				 * from_user_name 自己的昵称
				 * from_user_head_img 自己的头像
				 * to_id 对方的id
				 * content 消息的内容
				 * msg_type 信息类型  1=文字信息 2=图片信息 3=语音 4=红包 5=转账 9=添加好友
				 * duration 语音时长
				 * */
				let message = '';
				if (msg_type == 2) {
					message = {
						event: type,
						from_user_id: global.userInfo.id,
						to_user_id: this.to_id,
						msg_type,
						content: this.messageImg,
						last_send_time: Math.floor(new Date().getTime() / 1000),
					}
				} else if (msg_type == 4) {
					message = {
						event: type,
						from_user_id: global.userInfo.id,
						to_user_id: this.to_id,
						msg_type,
						content: this.shop_id,
						last_send_time: Math.floor(new Date().getTime() / 1000),
					}
				} else if (msg_type == 1) {
					message = {
						event: type,
						from_user_id: global.userInfo.id,
						to_user_id: this.to_id,
						msg_type,
						// content: this.replaceEmoji(this.messageContent),
						content: this.messageContent,
						last_send_time: Math.floor(new Date().getTime() / 1000),
					}
				}

				// 发送消息
				var that = this
				let uni_id = that.historyList.length - 1
				uni.sendSocketMessage({
					data: JSON.stringify(message),
					success: (res) => {
						console.log(res)
						// that.historyList.push(message)
						that.showMore = false;
						that.hideEmoji = false;
						that.isSend = false;
						that.messageContent = '';
						that.messageImg = '';
						that.$nextTick(() => {
							that.scrollIntoView = 'list-item' + uni_id;
						})
						/**
						 * roomInfo 必传 , chat_type 类型  1 要传 to_id  房间名字 ,  room_id 房间id,
						 * */
						// this.messageContent = ''; // 初始化聊天框
					},
					fail: (err) => {
						console.log(err)
						that.$message.info('消息发送失败，重新连接中，请稍后再试');
						getApp().initializeSocket();
					}
				});
			},
			// 拍照、照片
			handleChooseImage(e) {
				let _this = this;
				if (global.platform == 'ios') {
					// 从相册中选择图片
					const {
						paypass,
						mobile
					} = uni.getStorageSync("USER_INFO")
					// console.log(e)
					switch (e) {
						case 'camera':
							console.log("拍照，相机")
							_this.uploadIMG(e);
							break;
						case 'album':
							console.log("照片")
							_this.uploadIMG(e);
							break;
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '访问您的相机或相册权限，以及存储权限，使用拍照或修改图片等功能，用于上传头像或上传图片，是否允许？',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								// 从相册中选择图片
								const {
									paypass,
									mobile
								} = uni.getStorageSync("USER_INFO")
								// console.log(e)
								switch (e) {
									case 'camera':
										console.log("拍照，相机")
										_this.uploadIMG(e);
										break;
									case 'album':
										console.log("照片")
										_this.uploadIMG(e);
										break;
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						},
						fail: function(err) {
							console.log(err);
						}
					})
				}
			},
			uploadIMG(e) {
				const self = this
				// 从相册中选择图片
				uni.chooseImage({
					count: 1, // 默认9
					sourceType: [e], //从相册选择
					success: function(res) {
						// console.log(res)
						const tempFilePaths = res.tempFiles;
						new UploadImage(tempFilePaths, {
							complete: (res) => {
								console.log(res);
								uni.hideLoading();
								const type = 'send',
									msg_type = 2,
									pic = res[0].path;
								self.showMore = false;
								self.messageImg = pic;
								self.singleChat(type, msg_type);
								// 上传成功 返回数据格式为数组 [ { id: '', path: '' } ]
								// self.savePath(res)
							},
						})
						return;

						// 开始上传
						// new UploadFileToOSS(tempFilePaths, {
						// 	complete: function(res) {
						// 		console.log(res)
						// 		uni.hideLoading();

						// 	}
						// })
					},
					fail: res => {
						console.log(res)
					}
				});
			},
			savePath(option) {
				let options = []
				option.forEach((v, k) => {
					options.push({
						name: v.id,
						path: v.path
					})
				})
				this.$api.post('v1/5fe036ef5db43', {
					ids: JSON.stringify(options)
				}).then(res => {})
			},
			//添加表情
			addEmoji(em) {
				this.messageContent += em.text;
			},
			//替换表情符号为图片
			replaceEmoji(str) {
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					console.log('item: ' + item);
					for (let i = 0; i < this.emojiList.length; i++) {
						let row = this.emojiList[i];
						for (let j = 0; j < row.length; j++) {
							let EM = row[j];
							if (EM.text == item) {
								//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径
								//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
								// let onlinePath = 'https://s2.ax1x.com/2019/04/12/';
								let onlinePath =
									'https://app.yuntaikongtiao.com/static/lib/layui_exts/chat/images/face';
								let imgstr =
									'<image style="width:24px;height:24px;transform:translateY(-2px);vertical-align: middle;" src="' +
									onlinePath + this.onlineEmoji[EM.url] + '">';
								// console.log('imgstr: ' + imgstr);
								return imgstr;
							}
						}
					}
				});
				return replacedStr;
			},
			transEmo(emoMsg) {
				let _this = this;
				var emoPath, transMsg;
				var reg = /\[(.*?)\]/gm;
				transMsg = emoMsg.replace(reg, function(match) {
					for (var i = 0; i < _this.onlineEmoji.length; i++) {
						if (_this.onlineEmoji[i].text === match) {
							emoPath = 'https://app.yuntaikongtiao.com/static/lib/layui_exts/chat/images/face/' + _this.onlineEmoji[i].name + '.png';
							return '<img style="width:24px;height:24px;transform:translateY(-2px);vertical-align: middle;" src="' + emoPath + '" data-text="' + _this.onlineEmoji[i].text + '" />'
						}
					}
					return match;
				});
				// console.log(transMsg);
				return transMsg;
			},
			// 图片预览
			previewImage(url) {
				let urls = [];
				urls.push(url);
				uni.previewImage({
					current: 0,
					urls: urls
				})
			},
			goDetails(id) {
				uni.navigateTo({
					url: '/pages/homepage/shopDetail/shopDetail?id=' + id
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	[contenteditable]:focus {
		outline: none;
	}

	.download_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.evaluates_fd0_0_c0_c0 {
		font-size: 32rpx;
		color: #333;
	}

	.download_fd0_0_c2 {
		padding: 0rpx 0rpx 0rpx 0rpx;
		width: 200rpx;
	}

	.download_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}

	.download_fd0_0_c0_c0 {
		width: 30rpx;
		height: 30rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.download_fd0_0_c0 {
		width: 200rpx;
	}

	.download_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}


	.chat {
		// padding-bottom: 100rpx;
		.title_right {
			.add {
				width: 140upx;
				height: 56upx;
				font-size: 28upx;
				margin-right: 32upx;
				border: 1px solid #999999;
				text-align: center;
				line-height: 56upx;
				border-radius: 8upx;
			}
		}
	}

	.content {
		background-color: #F6F6F6;
		.msgList {
			padding: 0 32rpx 120rpx;
			.eachMsg {
				.msgStyle {
					display: flex;
					// align-items: center;
					margin: 32rpx 0;

					.headImg {
						width: 74rpx;
						height: 74rpx;
						border-radius: 50%;
					}

					.msgImg {
						max-width: 75%;
						border-radius: 10rpx;
						margin: 0 20rpx;

						image {
							width: 300rpx;
							height: 300rpx;
							border-radius: 10rpx;
						}
					}

					.msgOrder {
						max-width: 75%;
						background: #fff;
						padding: 18upx 30upx 18upx 28upx;
						border-radius: 6upx;
						margin: 0 20rpx;
						display: flex;

						.msgOrder_img {
							width: 180rpx;
							height: 130rpx;
							margin-right: 16rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 5rpx;
							}
						}

						.msgOrder_text {
							width: calc(100% - 196rpx);

							.msgOrder_text_1 {
								font-size: 28rpx;
								height: 78rpx;
								text-overflow: ellipsis;
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								/* 这里是超出几行省略 */
							}

							.msgOrder_text_2 {
								margin-top: 16rpx;
								font-size: 26rpx;

								.msgOrder_text_2_1 {
									color: crimson;
									margin-right: 16rpx;
								}
							}
						}
					}

					.msgText {
						max-width: 75%;
						background: #fff;
						line-height: 40upx;
						font-size: 28upx;
						font-family: PingFang SC;
						padding: 18upx 30upx 18upx 28upx;
						border-radius: 6upx;
						position: relative;
						color: #333333;
						margin: 0 20rpx;

						&::after {
							content: '';
							width: 0px;
							height: 0px;
							border-top: 5px solid transparent;
							border-bottom: 5px solid transparent;
							border-right: 5px solid #fff;
							position: absolute;
							top: 15px;
							left: -5px;
						}

						image {
							width: 200upx;
							height: 150upx;
						}

						.record {
							display: inline-block;
							vertical-align: middle;
							width: 30upx;
							// height: 40upx;
						}

						.time {
							display: inline-block;
							vertical-align: middle;
							margin-left: 20upx;
						}

						&.no_bj {
							background: inherit;
						}
					}
				}

				.myMsg {
					.msgText {
						&::after {
							content: '';
							width: 0px;
							height: 0px;
							border-top: 5px solid transparent;
							border-bottom: 5px solid transparent;
							border-left: 5px solid #fff;
							border-right: inherit;
							position: absolute;
							top: 15px;
							right: -5px;
							left: inherit;
						}
					}
				}
			}
		}

		.isPadBottom {
			// padding-bo: 315rpx;
			background-color: red;
		}

		//底部样式start
		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			z-index: 100;
			padding-left: 32rpx;
			padding-right: 32rpx;
			height: calc(100rpx + constant(safe-area-inset-bottom));//兼容 IOS<11.2
			height: calc(100rpx + env(safe-area-inset-bottom));//兼容 IOS>11.2padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2
			padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2// 先constant再env

			.input {
				width: 90%;
				height: 72upx;
				position: relative;
				// display: flex;
				// align-items: center;
				
				.input_div {
					box-sizing: border-box;
					width: 100%;
					height: 72upx;
					line-height: 72upx;
					background: #F8F8F9;
					border-radius: 8upx;
					padding: 0 84upx 0 24upx;
					margin-right: 24upx;
				}
				.textarea {
					width: 100%;
					height: 100% !important;
					background: #F8F8F9;
					border-radius: 8upx;
					padding: 0 84upx 0 24upx;
					margin-right: 24upx;
					padding-top: 16rpx;
				}

				input {
					width: 100%;
					height: 100%;
					background: #F8F8F9;
					border-radius: 8upx;
					padding: 0 84upx 0 24upx;
					margin-right: 24upx;
				}

				.emoji_btn {
					width: 48upx;
					height: 48upx;
					position: absolute;
					top: 50%;
					right: 24rpx;
					transform: translateY(-50%);
				}
			}


			.addFunction {
				width: 10%;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 48upx;
					height: 48upx;
				}
			}

			text {
				display: inline-block;
				width: 10%;
				text-align: center;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				// color: #00B68D;
				// margin-left: 32upx;
			}
		}

		//表情包样式start
		.face-box-wapper {
			position: fixed;
			z-index: 999;
			left: 0;
			bottom: 0;
			right: 0;
			height: 315upx;

			.emoji-swiper {
				// height: 40vw;
				height: 315rpx;
				background: #fff;

				swiper-item {
					display: flex;
					align-content: flex-start;
					flex-wrap: wrap;

					view {
						width: 12vw;
						height: 12vw;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 8.4vw;
							height: 8.4vw;
						}
					}
				}
			}

			.more-box {
				position: fixed;
				z-index: 999;
				left: 0;
				bottom: 0;
				right: 0;
				height: 315rpx;
				background-color: #f7f7f7;
				display: flex;
				align-items: center;
				padding: 0 48upx;

				.item {
					text-align: center;
					margin-right: 30upx;
					padding: 10upx;
				}

				.name {
					font-size: 28upx;
					color: #666;
					padding-top: 10upx;
				}

				image {
					width: 116upx;
					height: 116upx;
				}
			}
		}
	}
</style>